// 2.引入常态化样式表
require("../../assets/css/normalize.css");
// 1.引入重置样式表
require("../../assets/css/reset.css");
// 3.引入公共样式
require("../../assets/css/common.css");
//3.1引入字体图标样式
require("../../assets/fonts/iconfont.css");
require("../../assets/css/tabbar.less");
require("../../assets/css/navbar.less");
// 4.引入当前页样式
require("./sports_course.less");

//引入js模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

window.document.addEventListener("DOMContentLoaded", function () {
	// 1.渲染tabbar
	dom.tabbar("sports");

	// 2.渲染顶部导航navbar
	dom.navbar("course");

	// 3.发送请求获取课程列表,渲染页面
	axios.get("/api/train/courseList").then((res) => {
		console.log(res.data.data);
		let data = res.data.data;
		let newCourse = data.shift(); //因为最新课程是要第一条数据,所以就先shift处理数据
		// 渲染最新课程
		dom.get(".newcourse img").src = axios.defaults.baseURL + newCourse.imgurl;
		dom.get(".newcourse h4").textContent = newCourse.name;
		dom.get(".newcourse p").textContent = newCourse.desc.slice(0, 18) + "...";
		dom.get(".newcourse a").href =
			"sports_course_detail.html?id=" + newCourse.courseId;

		// 渲染课程列表
		let html = "";
		data.forEach((v) => {
			html += `
                <li>
                <a href="sports_course_detail.html?id=${v.courseId}">
                    <img src="${axios.defaults.baseURL + v.imgurl}">
                    <h4>${v.name}</h4>
                    <p>${v.desc.slice(0, 18) + "..."}</p>
                </a>
            </li>
                `;
		});
		dom.get(".course-list ul").innerHTML = html;
	});
});
